<template>
  <div  class="mobile-container">
    <van-skeleton title avatar :row="30" :loading="!clubs.init">
      <van-cell-group>
        <van-cell v-for="item in clubs.data"><van-button color="#1c7fc1" size="large" @click="gotoManageClub(item)">管理{{item.club.name}}</van-button></van-cell>
      </van-cell-group>

    </van-skeleton>
  </div>

</template>

<script lang="ts">
import {Notify} from "vant";
import {reactive} from "vue";
import {useRouter} from "vue-router";
export default {
  name: "mobile_view_manage",
  setup(){
    const router = useRouter();
    const clubs = reactive( {
      data:[] as any,init : false
    })
    fetch("api/user/self/role?size=20")
        .then(res => {
          if (res.status != 200) {
            throw "网络错误"
          }
          return res.json();
        }).then(json => {
      console.log(json)
      json.items.forEach((e: any) => {
        // console.log(e)
        if(e.role == 2) {
          // console.log(e.club.id)
          clubs.data.push(e);
        }
        // role.cluberole.push(e)
      })
      clubs.init=true;
    }).catch(error => {
      Notify({type: 'danger', message: error})
    })
    const gotoManageClub=function (item: any){
      router.push({
        path:"/manageclub",
        query:{
          clubid:item.club.id,
        }
      })
    }
    return {
      clubs,
      gotoManageClub
    }
  }
}
</script>

<style scoped>
.mobile-container{
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>